/* 设置整个页面的字体、背景颜色和行高 */
body {
    font-family: Arial, sans-serif; /* 使用Arial字体，如果没有则使用无衬线字体 */
    background-color: #f4f4f4f9; /* 浅灰色背景 */
    line-height: 1.6; /* 行高为字体大小的1.6倍 */
}

/* 容器类，用于居中并限制宽度的容器 */
.container {
    width: 80%; /* 容器宽度为视口宽度的80% */
    margin: auto; /* 上下0，左右自动（居中） */
    overflow: hidden; /* 隐藏溢出的内容 */
}

/* 头部样式，用于显示站点标题或徽标 */
header {
    background: #50b3a2; /* 背景颜色为浅绿色 */
    color: white; /* 文字颜色为白色 */
    padding: 20px 0; /* 上下20px内边距，左右0 */
    text-align: center; /* 文字居中 */
}

/* 导航栏样式，用于放置导航链接 */
nav {
    background: #333; /* 背景颜色为深灰色 */
    color: white; /* 文字颜色为白色 */
    padding: 10px 0; /* 上下10px内边距，左右0 */
}

/* 导航链接样式 */
nav a {
    color: white; /* 链接文字颜色为白色 */
    margin-right: 15px; /* 右边距为15px */
    text-decoration: none; /* 去除下划线 */
}

/* 主要内容区域样式 */
main {
    padding: 20px; /* 内边距为20px */
    background: #fff; /* 背景颜色为白色 */
    margin: 20px 0; /* 上下20px外边距，左右0 */
}

/* 页脚样式，用于显示版权信息等 */
footer {
    background: #333; /* 背景颜色为深灰色 */
    color: white; /* 文字颜色为白色 */
    text-align: center; /* 文字居中 */
    padding: 10px 0; /* 上下10px内边距，左右0 */
    position: relative; /* 相对定位 */
    bottom: 0; /* 定位到页面底部 */
    width: 100%; /* 宽度为100% */
}